<template>
  <div>
    <!-- 标题区域 -->
    <div class="topLocation">员工信息管理 / 员工图表</div>
    <h2 style="text-align: center; font-size: 24px;">月薪分布图表</h2>
    <!-- 图表容器 -->
    <div id="salary-chart" style="width: 80%; height: 400px; margin: 0 auto;"></div>
  </div>
</template>

<script>
import { ref, onMounted } from 'vue';
import * as echarts from 'echarts';
import axios from "axios";

export default {
  setup() {
    const chart = ref(null); // 用于存储图表实例

    // 获取月薪数据的异步函数
    const fetchSalaryData = async () => {
      try {
        // 从后台接口获取月薪数据
        const below3000Response = await axios.get('http://localhost:8080/employee/salaryBelow3000');
        const between3000And5000Response = await axios.get('http://localhost:8080/employee/salaryBetween3000And5000');
        const above5000Response = await axios.get('http://localhost:8080/employee/salaryAbove5000');

        // 返回从后台获取的三类薪资区间数据
        return [
          below3000Response.data,         // 薪资低于3000的员工数量
          between3000And5000Response.data, // 薪资在3000到5000之间的员工数量
          above5000Response.data          // 薪资高于5000的员工数量
        ];
      } catch (error) {
        console.error('获取月薪数据失败:', error);
        // 如果接口请求失败，使用示例数据
        return [10, 20, 30]; // 示例数据：分别表示三类薪资区间的员工数量
      }
    };

    // 初始化图表
    const initChart = async () => {
      const data = await fetchSalaryData(); // 获取月薪数据

      // 配置图表选项
      const option = {
        title: {
          subtext: '根据薪资区间统计',
          left: 'center',
          textStyle: {
            fontSize: 18,
            fontWeight: 'bold',
            color: '#333'
          }
        },
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        xAxis: {
          type: 'category',
          data: ['3000以下', '3000-5000', '5000以上'], // 设置 X 轴为薪资区间
          axisLabel: {
            fontSize: 16, // 设置 X 轴标签文字大小
            color: '#333', // 设置标签文字颜色，#333 是一种深灰色
          },
          axisLine: {
            show: true, // 显示 X 轴线条
            lineStyle: {
              color: '#ddd', // X 轴线条颜色
            }
          },
          axisTick: {
            show: false // 不显示刻度线
          }
        },
        yAxis: {
          type: 'value',
          axisLabel: {
            fontSize: 16 // 设置 Y 轴标签文字大小
          },
          axisLine: {
            show: true, // 显示 Y 轴线条
            lineStyle: {
              color: '#ddd' // Y 轴线条颜色
            }
          },
          axisTick: {
            show: false // 不显示刻度线
          }
        },
        series: [
          {
            name: '员工数量',
            data: data, // 使用从后台获取的月薪数据
            type: 'bar', // 设置图表类型为柱状图
            barWidth: '50%', // 设置柱状图的宽度
            itemStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [ // 渐变色效果
                  { offset: 0, color: '#ff7f50' },  // 渐变开始色
                  { offset: 1, color: '#ff6347' }   // 渐变结束色
                ]),
                shadowBlur: 10, // 设置阴影模糊度
                shadowOffsetX: 5, // 设置阴影水平偏移
                shadowOffsetY: 5, // 设置阴影垂直偏移
                shadowColor: 'rgba(0, 0, 0, 0.3)' // 阴影颜色
              }
            },
            emphasis: {
              itemStyle: {
                color: '#ff4500' // 鼠标悬浮时柱子的颜色
              }
            },
            animationDuration: 1000, // 动画时长
          }
        ]
      };

      // 设置图表的选项并渲染
      chart.value.setOption(option);
    };

    // 在组件挂载后初始化图表
    onMounted(async () => {
      // 获取图表容器并初始化 ECharts 实例
      chart.value = echarts.init(document.getElementById('salary-chart'));
      await initChart(); // 初始化图表并加载数据
    });

    return {}; // 返回空对象（没有需要暴露的响应式数据或方法）
  }
};
</script>

<style scoped>
/* 标题样式 */
.topLocation {
  font-size: 16px;
  font-weight: bold;
  color: #000;
  padding: 10px;
  border-bottom: 2px solid #000;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  margin-top: 20px;
}

/* 图表容器样式 */
#salary-chart {
  text-align: center; /* 图表居中显示 */
}
</style>
